<template>
<div>
  <div class="demo-image">
  <div>
    <div class="user-conter">
      <span class="demonstration"><h3>我的头像</h3></span>
    </div>
    <el-image
      style="width: 200px; height: 200px"
      :src="url"
      :fit="fit"></el-image>
    <div class="user-conter">
      <span class="demonstration"><h3>用户名</h3></span>
      <span>{{$store.getters.getNickName}}</span>
    </div>
    <div class="user-conter">
      <span class="demonstration"><h3>个人说明</h3></span>
    </div>
    <div class="user-conter">
      <span class="demonstration">{{explain}}</span>
    </div>
    <el-input v-model="explain" :placeholder="explain"></el-input>
  </div>
</div>
</div>
</template>

<script>
export default{
  name: 'pscenter',
  data () {
    return {
      fit: 'fill',
      url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
      explain: '请输入个人说明'
    }
  },
  methods: {

  }
}
</script>

<style scoped>
.demo-image{
  background-color: #f5f5f5;
  padding: 10px 50px;
}
.user-conter span{
  padding: 20px;
}
</style>
